<template>
  <view class="activity-page">
    <!-- 展会列表 -->
    <view 
      class="activity-card" 
      v-for="exhibition in exhibitionList" 
      :key="exhibition.id"
      @click="goToDetail(exhibition)"
    >
      <view class="card-image">
        <image 
          :src="exhibition.coverImage" 
          class="exhibition-cover" 
          mode="aspectFit"
          @error="handleImageError"
        />
      </view>
      <view class="card-content">
        <view class="event-title">{{ exhibition.name }}</view>
        <view class="event-location">{{ exhibition.location }}</view>
        <view class="event-dates">{{ formatDateRange(exhibition.startTime, exhibition.endTime) }}</view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading" @click="loadMore">
      <text class="load-more-text">加载更多</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="exhibitionList.length === 0 && !loading">
      <text class="empty-text">暂无展会数据</text>
    </view>
  </view>
</template>

<script>
import { getExhibitionList } from '@/api/api.js'

export default {
  name: 'OffLineActivity',
  data() {
    return {
      exhibitionList: [], // 展会列表数据
      loading: false,     // 加载状态
      hasMore: true,      // 是否还有更多数据
      currentPage: 1,     // 当前页码
      pageSize: 10,       // 每页数量
      keywords: '',       // 搜索关键词
      status: true        // 状态筛选
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '线下活动'
    })
    this.loadExhibitionList()
  },
  methods: {
    // 加载展会列表
    async loadExhibitionList() {
      if (this.loading) return
      
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          limit: this.pageSize,
          status: this.status
        }
        
        // 如果有搜索关键词，添加到参数中
        if (this.keywords.trim()) {
          params.keywords = this.keywords.trim()
        }
        
        const response = await getExhibitionList(params)
        
        if (response.code === 200) {
          const { list, totalPage } = response.data
          
          if (this.currentPage === 1) {
            this.exhibitionList = list
          } else {
            this.exhibitionList = [...this.exhibitionList, ...list]
          }
          
          this.hasMore = this.currentPage < totalPage
        } else {
          console.error('API返回错误:', response)
          uni.showToast({
            title: response.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载展会列表失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 搜索展会
    searchExhibitions(keywords) {
      this.keywords = keywords
      this.currentPage = 1
      this.exhibitionList = []
      this.loadExhibitionList()
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.currentPage++
        this.loadExhibitionList()
      }
    },

    // 下拉刷新
    onRefresh() {
      this.currentPage = 1
      this.exhibitionList = []
      this.loadExhibitionList()
    },

    // 格式化日期范围
    formatDateRange(startTime, endTime) {
      if (!startTime || !endTime) return ''
      
      const start = new Date(startTime)
      const end = new Date(endTime)
      
      const startStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`
      const endStr = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')}`
      
      return `${startStr} 至 ${endStr}`
    },

    // 处理图片加载错误
    handleImageError(e) {
      // 可以设置默认图片
      e.target.src = '/static/images/default-exhibition.jpg'
    },

    goToDetail(exhibition) {
      uni.navigateTo({
        url: `/pages/user/activity/off-lineActivity/detail?id=${exhibition.id}`
      })
    }
  }
}
</script>

<style scoped>
.activity-page {
  background-color: #F5F5F5;
  min-height: 100vh;
  padding: 20rpx;
}

.activity-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 32rpx;
  overflow: hidden;
}

/* Card Image Section (上图) */
.card-image {
  height: 300rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
}

/* 展会封面图片 */
.exhibition-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #ffffff;
}

/* Formnext Banner */
.formnext-banner {
  background: linear-gradient(135deg, #007B8C 0%, #4CAF50 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.formnext-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200rpx;
  height: 200rpx;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 Q30,10 40,20 Q50,30 60,20 Q70,10 80,20" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none"/></svg>') no-repeat;
  background-size: contain;
  opacity: 0.6;
}

.formnext-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 40rpx;
}

.formnext-left,
.formnext-right {
  flex: 1;
}

.formnext-left {
  margin-right: 40rpx;
}

.event-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 8rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #FFFFFF;
  margin-bottom: 8rpx;
  text-transform: uppercase;
}

.location,
.dates {
  font-size: 20rpx;
  color: #FFFFFF;
  margin-bottom: 4rpx;
}

/* PME Banner */
.pme-banner {
  background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
  color: #FFFFFF;
}

.pme-content {
  text-align: center;
}

.pme-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 8rpx;
}

.pme-subtitle {
  font-size: 24rpx;
  color: #FFFFFF;
}

/* HIIE Banner */
.hiie-banner {
  background: linear-gradient(135deg, #E0E0E0 0%, #CCCCCC 100%);
}

.logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #E0E0E0 0%, #CCCCCC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  border: 3rpx solid #CCCCCC;
}

.logo-text {
  text-align: center;
  z-index: 1;
}

.logo-main {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #007B8C;
  line-height: 1;
}

.logo-sub {
  display: block;
  font-size: 18rpx;
  color: #007B8C;
  margin-top: 2rpx;
  line-height: 1;
}

/* Card Content Section (下文) */
.card-content {
  padding: 24rpx 32rpx 32rpx;
  background-color: #ffffff;
  border-radius: 0 0 16rpx 16rpx;
}

.event-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.event-location,
.event-dates {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.event-location:last-child,
.event-dates:last-child {
  margin-bottom: 0;
}

/* 加载更多 */
.load-more {
  padding: 32rpx;
  text-align: center;
}

.load-more-text {
  font-size: 26rpx;
  color: #666666;
}

/* 加载状态 */
.loading {
  padding: 32rpx;
  text-align: center;
}

.loading-text {
  font-size: 26rpx;
  color: #666666;
}

/* 空状态 */
.empty-state {
  padding: 80rpx 32rpx;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>